<template>
  <div class="user-select-bg">
    <div class="user-select-header">选择人员</div>
    <div class="user-select-search-wrap">
      <van-search v-model="search" placeholder="搜索姓名/部门" />
    </div>
    <div class="user-list-wrap">
      <div v-if="currentDeptId" class="back-btn" @click="currentDeptId = null">
        ← 返回部门列表
      </div>
      <van-list>
        <van-cell-group>
          <template v-if="(mode==='dept'||mode==='all') && !currentDeptId">
            <div
              v-for="dept in filteredDepts"
              :key="dept.id"
              class="user-card"
              :class="{ selected: isSelected(dept) }"
              @click="toggleDept(dept)"
            >
              <div class="user-avatar user-avatar-dept">🏢</div>
              <div class="user-info">
                <div class="user-name">{{ dept.name }}</div>
                <div class="user-dept">部门</div>
              </div>
              <van-icon :name="isSelected(dept) ? 'checked' : 'circle'" :color="isSelected(dept) ? '#1677ff' : '#ccc'" class="user-check" />
            </div>
          </template>
          <template v-if="mode==='user'||mode==='all'">
            <div
              v-for="user in filteredUsers"
              :key="user.id"
              class="user-card"
              :class="{ selected: isSelected(user) }"
              @click="toggleUser(user)"
            >
              <div class="user-avatar">{{ user.name.charAt(0) }}</div>
              <div class="user-info">
                <div class="user-name">{{ user.name }}</div>
                <div class="user-dept">{{ user.dept }}</div>
              </div>
              <van-icon :name="isSelected(user) ? 'checked' : 'circle'" :color="isSelected(user) ? '#1677ff' : '#ccc'" class="user-check" />
            </div>
          </template>
        </van-cell-group>
      </van-list>
    </div>
    <div class="user-select-actions">
      <van-button block @click="onCancel" class="btn-cancel">取消</van-button>
      <van-button type="primary" block @click="onConfirm" class="btn-confirm">确定</van-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'userSelect',
  props: {
    selected: { type: Array, default: () => [] },
    mode: { type: String, default: 'all' }, // 'user' | 'dept' | 'all'
    multiple: { type: Boolean, default: true },
    max: { type: Number, default: 10 }
  },
  data() {
    return {
      search: '',
      deptList: [
        { id: 'd1', name: '研发部' },
        { id: 'd2', name: '市场部' },
        { id: 'd3', name: '人事部' },
        { id: 'd4', name: '财务部' }
      ],
      userList: [
        { id: 1, name: '张三', dept: '研发部', deptId: 'd1' },
        { id: 2, name: '李四', dept: '市场部', deptId: 'd2' },
        { id: 3, name: '王五', dept: '人事部', deptId: 'd3' },
        { id: 4, name: '赵六', dept: '财务部', deptId: 'd4' },
        { id: 5, name: '小明', dept: '研发部', deptId: 'd1' },
      ],
      selectedInner: [],
      currentDeptId: null, // 当前选中的部门id，null为全部
    };
  },
  computed: {
    filteredDepts() {
      if (!this.search) return this.deptList;
      return this.deptList.filter(d => d.name.includes(this.search));
    },
    filteredUsers() {
      let users = this.userList;
      if (this.currentDeptId) {
        users = users.filter(u => u.deptId === this.currentDeptId);
      }
      if (this.search) {
        users = users.filter(
          u => u.name.includes(this.search) || u.dept.includes(this.search)
        );
      }
      return users;
    },
  },
  watch: {
    selected: {
      immediate: true,
      handler(val) {
        this.selectedInner = Array.isArray(val) ? [...val] : [];
      }
    }
  },
  methods: {
    toggleUser(user) {
      if (this.selectedInner.length && this.selectedInner[0].deptId === undefined) {
        this.selectedInner = [];
      }
      if (this.isSelected(user)) {
        this.selectedInner = this.selectedInner.filter(u => u.id !== user.id);
      } else {
        if (!this.multiple) {
          this.selectedInner = [user];
        } else if (this.selectedInner.length < this.max) {
          this.selectedInner.push(user);
        }
      }
    },
    toggleDept(dept) {
      this.currentDeptId = dept.id;
    },
    isSelected(item) {
      return this.selectedInner.some(i => i.id === item.id);
    },
    onCancel() {
      this.$emit('cancel');
    },
    onConfirm() {
      this.$emit('confirm', this.selectedInner);
    },
  },
};
</script>
<style scoped>
.user-select-bg {
  background: #f6f8fa;
  min-height: 100vh;
  padding-bottom: 0;
}
.user-select-header {
  background: linear-gradient(90deg, #42d0ea 0%, #1677ff 100%);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 22px 0 16px 0;
  letter-spacing: 2px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 12px #1677ff22;
  margin-bottom: 8px;
}
.user-select-search-wrap {
  padding: 0 16px 8px 16px;
}
.user-list-wrap {
  padding: 0 8px 0 8px;
}
.user-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px #1677ff11;
  padding: 10px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s, box-shadow 0.2s;
  position: relative;
}
.user-card.selected {
  border: 2px solid #1677ff;
  box-shadow: 0 4px 16px #1677ff22;
}
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6f7ff 0%, #7db3ff 100%);
  color: #1677ff;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px #1677ff22;
}
.user-avatar-dept {
  background: linear-gradient(135deg, #fffbe6 0%, #ffe58f 100%);
  color: #faad14;
}
.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
.user-dept {
  color: #888;
  font-size: 13px;
  margin-top: 2px;
}
.user-check {
  font-size: 22px;
  margin-left: 8px;
}
.user-select-actions {
  display: flex;
  gap: 12px;
  margin: 24px 16px 0 16px;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #f6f8faee;
  padding: 16px 0 16px 0;
  z-index: 10;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -2px 12px #1677ff11;
}
.btn-cancel {
  background: #fff;
  color: #1677ff;
  border: 1.5px solid #1677ff;
  font-weight: 500;
  border-radius: 12px;
}
.btn-confirm {
  background: linear-gradient(90deg, #42d0ea 0%, #1677ff 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  border: none;
}
.back-btn {
  color: #1677ff;
  font-size: 15px;
  font-weight: 500;
  margin: 8px 0 12px 8px;
  cursor: pointer;
  display: inline-block;
}
</style> 